<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>第一种头部</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: rgba(0, 0, 0, 0);
            line-height: 1;
        }

        .wrap {
            min-height: 100vh;
            background-color: rgba(0, 0, 0, .3);
        }
        /*搜索框*/

        .search_box {
            background-color: #fff;
            padding: 0.2rem 0.75rem;
            padding-top: calc(25px + 0.3rem);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .search {
            flex: 1;
            background-color: #f3efee;
            display: flex;
            align-items: center;
            padding: 0.4rem 0.2rem;
            margin-right: 0.2rem;
        }

        .search img {
            width: 1rem;
            margin-right: 0.2rem;
        }

        .search input {
            line-height: 1rem;
            height: 1rem;
        }

        .cancel_btn {
            font-size: 0.8rem;
            color: #333;
        }
        /*搜索提示*/

        .tips_box {
            background-color: #fff;
            padding: 1rem 0 0 0;
        }

        .other_tip {
            text-align: center;
        }

        .other_tip div {
            margin-bottom: 1rem;
        }

        .other_tip img {
            height: 1.5rem;
            margin: auto;
        }

        .other_tip span {
            font-size: 0.6rem;
            color: #333;
            font-weight: 600;
        }


        /*列表样式*/

        .list_box {
            background-color: #fff;
            margin: 0.45rem 0;
            line-height: 1.5;
        }

        .list_box .list_all_info_box {
            padding: 0 0.95rem;
        }

        .list_box .list_all_info_box .user_info_box {
            display: flex;
            align-items: center;
            padding: 0.95rem 0;
        }

        .list_box .list_all_info_box .user_info_box .user_img {
            margin-right: 0.95rem;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box .user_name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box .time {
            font-size: 0.6rem;
            color: #999;
        }

        .list_box .list_all_info_box .txt_box {
            font-size: 0.8rem;
            color: #333;
            text-align: justify;
        }

        .list_box .list_all_info_box .a_box div {
            display: flex;
            align-items: center;
            margin: 0.95rem 0;
            padding: 0.45rem;
            background-color: #f7f7f7;
        }

        .list_box .list_all_info_box .a_box div .a_img {
            width: 2.45rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .a_box div .a_title {
            font-size: 0.7rem;
            color: #333;
        }

        .list_box .list_all_info_box .address_box {
            display: flex;
            align-items: center;
        }

        .list_box .list_all_info_box .address_box .address_img {
            width: 0.625rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .address_box .address_info {
            font-size: 0.6rem;
            color: #666;
        }

        .list_box .three_btn_box {
            display: flex;
            justify-content: space-around;
            padding: 1.5rem 0 0.6rem 0;
        }

        .list_box .three_btn_box .btn {
            display: flex;
            align-items: center;
        }

        .list_box .three_btn_box .btn img {
            width: 0.8rem;
            margin-right: 0.3rem;
        }

        .list_box .three_btn_box .btn span {
            font-size: 0.7rem;
            color: #999;
        }

        .friend_list{
          height: 90vh;
          overflow: hidden;
          overflow-y: scroll;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="search_box">
            <div class="search">
                <img src="../../../image/four/search.png" alt="">
                <input type="text" name="" value="" placeholder="请输入关键字" v-model="keywords">
            </div>
            <div class="cancel_btn">取消</div>
        </div>



        <div class="tips_box">
            <div class="other_tip clearfix">
                <div class="aui-col-xs-4">
                    <img src="../../../image/four/search_nc.png" alt="">
                    <span>昵称</span>
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../../image/four/search_tp.png" alt="">
                    <span>图片</span>
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../../image/four/search_lj.png" alt="">
                    <span>链接</span>
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../../image/four/search_dz.png" alt="">
                    <span>地标</span>
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../../image/four/search_tx.png" alt="">
                    <span>头像</span>
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../../image/four/search_yy.png" alt="">
                    <span>音乐</span>
                </div>
            </div>
        </div>




        <div class="friend_list">
                <ul class="all_list_box">
                    <li class="list_box" v-for="friend_dynamic in result_data">
                        <div class="list_all_info_box">
                            <div class="user_info_box" @click="open_new_win('five',friend_dynamic.username,'朋友动态',friend_dynamic.head_img,friend_dynamic.user_id)">


                                <!-- 判断用户头像是否存在 不存在则显示默认头像 -->
                                <div class="user_img" :style="'background:url('+friend_dynamic.head_img+') center/cover no-repeat;width:2.45rem;height:2.45rem;'"></div>



                                <!-- 用户名字以及发布时间 -->
                                <div class="name_time_box">
                                    <div class="user_name">{{friend_dynamic.username}}</div>
                                    <div class="time">{{friend_dynamic.addtime}}</div>
                                </div>
                            </div>


                            <!-- 判断用户发布动态是否有编辑内容 -->
                            <div v-if="friend_dynamic.content!=''" :class="{'padding-B':friend_dynamic.pic==''}" class="txt_box">{{friend_dynamic.content}}</div>



                            <!-- 分享部分的判断 -->
                            <!-- 图文分享 带文本 -->
                            <ul v-if="friend_dynamic.type==1 && friend_dynamic.content!='' && friend_dynamic.pic!=''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;padding-top: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                    <div class="aui-list-item-inner" style="padding: 0;">
                                        <div class="aui-row aui-row-padded">
                                            <div v-for="img_src in friend_dynamic.pic" class="aui-col-xs-4">
                                                <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!-- 图文分享 不带文本 -->
                            <ul v-else-if="friend_dynamic.type==1 && friend_dynamic.content==''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                    <div class="aui-list-item-inner" style="padding: 0;">
                                        <div class="aui-row aui-row-padded">
                                            <div v-for="img_src in friend_dynamic.pic" class="aui-col-xs-4">
                                                <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                            <!-- 商品分享 带文本 -->
                            <div class="a_box" v-if="friend_dynamic.type==2 && friend_dynamic.content!=''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <div>
                                    <img :src="friend_dynamic.logo_pic" alt="" class="a_img">
                                    <span class="a_title">{{friend_dynamic.goods_name}}-{{friend_dynamic.goods_title}}</span>
                                </div>
                            </div>
                            <!-- 商品分享  不带文本 -->
                            <div class="a_box" v-else-if="friend_dynamic.type==2 && friend_dynamic.content==''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <div style="margin-top:0;">
                                    <img :src="friend_dynamic.logo_pic" alt="" class="a_img">
                                    <span class="a_title">{{friend_dynamic.goods_name}}-{{friend_dynamic.goods_title}}</span>
                                </div>
                            </div>
                            <!-- 转发 商品 带文本 -->
                            <div class="a_box" v-else-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==2 && friend_dynamic.content!=''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <div>
                                    <img :src="friend_dynamic.forward.forward_logo_pic" alt="" class="a_img">
                                    <span class="a_title">{{friend_dynamic.forward.forward_goods_name}}-{{friend_dynamic.forward.forward_goods_title}}</span>
                                </div>
                            </div>
                            <!-- 转发 商品 不带文本 -->
                            <div class="a_box" v-else-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==2 && friend_dynamic.content==''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <div style="margin-top:0;">
                                    <img :src="friend_dynamic.forward.forward_logo_pic" alt="" class="a_img">
                                    <span class="a_title">{{friend_dynamic.forward.forward_goods_name}}-{{friend_dynamic.forward.forward_goods_title}}</span>
                                </div>
                            </div>
                            <!-- 转发图文 带文本 -->
                            <ul v-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==1 && friend_dynamic.content!=''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                    <div class="aui-list-item-inner" style="padding: 0;">
                                        <div class="aui-row aui-row-padded">
                                            <div v-for="img_src in friend_dynamic.forward.forward_pic" class="aui-col-xs-4">
                                                <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!-- 转发图文 不带文本 -->
                            <ul v-else-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==1 && friend_dynamic.content==''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;padding-top: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                    <div class="aui-list-item-inner" style="padding: 0;">
                                        <div class="aui-row aui-row-padded">
                                            <div v-for="img_src in friend_dynamic.forward.forward_pic" class="aui-col-xs-4">
                                                <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>



                            <!-- 发布动态时的地址 -->
                            <div class="address_box" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                                <img src="../../../image/four/address.png" alt="" class="address_img">
                                <span v-if="friend_dynamic.address!=''" class="address_info">{{friend_dynamic.address}}</span>
                                <span v-else class="address_info">地球的某个角落</span>
                            </div>
                        </div>

                        <!-- 分享评论点赞状态 -->
                        <div class="three_btn_box" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <div class="btn">
                                <!-- 是否已分享 -->
                                <img v-if="friend_dynamic.is_forward!=0" src="../../../image/four/fx_on.png" alt="">
                                <img v-else src="../../../image/four/fx_off.png" alt="">

                                <!-- 分享数量 -->
                                <span v-if="friend_dynamic.forward_num!=0">{{friend_dynamic.forward_num}}</span>
                                <span v-else></span>
                            </div>

                            <div class="btn">
                                <!-- 是否已评论 -->
                                <img v-if="friend_dynamic.is_item!=0" src="../../../image/four/pl_on.png" alt="">
                                <img v-else src="../../../image/four/pl_off.png" alt="">

                                <!-- 评论的数量 -->
                                <span v-if="friend_dynamic.item_num!=0">{{friend_dynamic.item_num}}</span>
                                <span v-else></span>
                            </div>

                            <div class="btn">
                                <!-- 是否点赞 -->
                                <img v-if="friend_dynamic.is_like!=0" src="../../../image/four/dz_on.png" alt="">
                                <img v-else src="../../../image/four/dz_off.png" alt="">

                                <!-- 点赞数量 -->
                                <span v-if="friend_dynamic.likecount!=0">{{friend_dynamic.likecount}}</span>
                                <span v-else></span>
                            </div>
                        </div>
                    </li>
                </ul>
        </div>



    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {

        // 实例化vue 展示搜索结果

        var result_list = new Vue({
            el: '.wrap',
            data: {
                result_data: [],
                keywords: '',
                page: 1
            },
            created: function() {

            },
            mounted: function() {
                var $this = this;
            },
            watch: {
                keywords: function() {
                    var $this = this;
                    $this.get_result();
                }
            },
            methods: {
                // 获取搜索结果
                get_result: function() {
                    var $this = this;
                    if ($this.keywords == "") {
                        $this.result_data = [];
                        $('.tips_box').show();
                    } else {
                        api.showProgress({
                            style: 'default',
                            animationType: 'fade',
                            title: '努力加载中...',
                            text: '先喝杯茶...',
                            modal: false
                        });
                        api.ajax({
                            url: window.Url.Community_communityList,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    page: $this.page,
                                    keywords: $this.keywords
                                }
                            }
                        }, function(ret, err) {
                           api.hideProgress();

                            if (ret) {
                                console.log(JSON.stringify(ret));
                                if(ret.re==1){
                                  $('.tips_box').hide();
                                  $this.result_data = ret.data.list;
                                  $this.$nextTick(function() {
                                      $('.img').height($('.img').width())
                                  })
                                }else{
                                  $('.tips_box').show();
                                }

                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                    }

                }
            }
        })

    };

    // //  关闭当前的frm
    $('body').on('click', '.cancel_btn', function() {
        api.closeFrame({});
    })


    // 打开新的窗口
    function open_new_win(index, title, type, img_src, dynamic_id) {
        api.openWin({
            name: 'four_' + index + '_header',
            url: 'four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                dynamic_id: dynamic_id,
                img_src: img_src,
                friend_id: dynamic_id
            }
        });

        if (type == "图文分享" || type == "商品分享") {
            close_release();
        }
    }
</script>

</html>
